'use client'
import React from 'react';
import {Button} from "@/components/ui/button";
import Dialog from "@/app/_components/Dialog";
import Image from "next/image";
import gsap from "gsap";
import {useGSAP} from "@gsap/react";
import {ScrollTrigger} from "gsap/ScrollTrigger";
import AutoFit from 'autofit.js'

gsap.registerPlugin(useGSAP, ScrollTrigger)

const Home: React.FC = () => {
    const [visible, setVisible] = React.useState(false);

    const boxRef = React.useRef<HTMLDivElement>(null)
    // React.useEffect(() => {
    //     AutoFit.init()
    //     return () => {
    //         AutoFit.off()
    //     }
    // }, [])
    useGSAP(() => {
            gsap.to(boxRef.current,
                {
                    y: -100,
                    opacity: 1,
                    duration: 0.5,
                    ease: 'power1.out',
                    scrollTrigger: {
                        trigger: boxRef.current,
                        scrub: 2,
                        markers: true
                    }
                })
        }, {scope: boxRef}
    )
    const handleClick = () => {
        setVisible(false)
    }
    const list = [
        {
            id: 1,
            title: '标题',
            content: '内容'
        },
        {
            id: 2,
            title: '标题',
            content: '内容'
        },
        {
            id: 3,
            title: '标题',
            content: '内容'
        },
    ]
    return (
        <div>
            <Button variant="default" onClick={() => setVisible(true)}>Button</Button>
            <Image title="image" priority alt="image" width={877} height={585} src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"/>
            <div className="flex flex-col items-center">
                <div ref={boxRef}> 我们是谁？</div>
            </div>
            <Dialog visible={visible} onClose={() => setVisible(false)} onCancel={() => setVisible(false)} onConfirm={handleClick}>
                test
            </Dialog>
        </div>
    );
};

export default Home;
